<template>
  <div class="login">
    <div class="login-shang">
      <img src="https://shadow.elemecdn.com/faas/h5/static/logo.ba876fd.png" alt>
    </div>

    <form @submit.prevent="loginByMobile">
      <div class="login-xia">
        <section class="xia1">
          <input type="tel" v-model="phonenum" maxlength="11" placeholder="手机号" v-on:input="infunc">
          <button class="yzm" id="yzm" @click="getValidateCode" :disabled="disabled">获取验证码</button>
        </section>
        <section class="xia2">
          <input type="text" placeholder="验证码" maxlength="6" v-model="validate_code">
        </section>
      </div>
      <div class="xieyi">
        <span>
          新用户登录即自动注册，并表示已同意
          <a
            href="//h5.ele.me/service/agreement/#initTitle=%E7%94%A8%E6%88%B7%E6%9C%8D%E5%8A%A1%E5%8D%8F%E8%AE%AE&key=ruleQue18"
          >《用户服务协议》</a>
        </span>
      </div>
      <button class="logins" type="submit">登录</button>
      <a href class="about">关于我们</a>
    </form>

    <!-- 下面的代码是弹出验证码图框的 -->
    <mt-popup v-model="isShow" closeOnClickModal="true" popup-transition="popup-fade">
      <div class="popup">
        <p>请填写图形验证码</p>
        <div class="popup_1">
          <div>
            <input
              class="popup_inp"
              v-model="captcha_value"
              type="text"
              placeholder="请输入验证码..."
              maxlength="4"
            >
            <img :src="captcha_image" alt title="点击图片刷新" @click="getImageCode">
          </div>
        </div>
        <div class="popup_2">
          <button @click="hiddentShow">取消</button>
          <button @click="getValidateCode">确定</button>
        </div>
      </div>
    </mt-popup>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
// 使用mint-ui的弹出框
import { Toast, Popup } from "mint-ui";

// import datas from './datas'

export default {
  data() {
    return {
      // user_id: "",
      // need_bind_mobile: "",

      //button按钮是否禁用
      disabled: true,

      // 手机号码
      phonenum: "",

      //短信验证码
      validate_code: "",
      //访问过于平凡时使用图片验证
      captcha_value: "",

      //使用图片验证时的哈希值
      captcha_hash: "",
      //使用图片验证时图片的地址
      captcha_image: "",

      // 默认的情况下是否要弹出验证图框
      isShow: false,

      // validate_token，验证码验证成功后返回的凭证参数
      validate_token: ""
    };
  },
  computed:mapState({

  }),
  methods: {

    ...mapMutations(["setUserId"]),

    
    infunc() {
      var num = this.phonenum.length;
      var numfir = this.phonenum[0];
      // console.log(this.phonenum[0])
      if (num == 11 && numfir == 1) {
        this.disabled = false;
        document.getElementById("yzm").style.color = "#2395ff";
      } else {
        this.disabled = true;
        document.getElementById("yzm").style.color = "#999";
      }
    },
    hiddentShow() {
      this.isShow = !this.isShow;
    },
    getValidateCode() {
      // console.log("点击啦");
      let dat = {
        captcha_hash: this.captcha_hash,
        captcha_value: this.captcha_value,
        mobile: this.phonenum,
        scf: "ms"
      };
      console.log(this.phonenum);
      this.$axios
        .post("/api/restapi/eus/login/mobile_send_code", dat)
        .then(res => {
          console.log(
            "账号发送过去后返回的获取验证码的时候的数据**************************",
            res
          );
          this.validate_token = res.data.validate_token;
          this.isShow = !this.isShow;
        })
        // 在弹出图片验证码后才会运行下面的函数
        .catch(error => {
          if (error.response) {
            if (error.response.status == 400) {
              this.getImageCode();
            }
          }
        });
    },
    // 获取图片验证码的方法
    getImageCode() {
      this.$axios
        .post("/api/restapi/eus/v3/captchas", { captcha_str: this.phonenum })
        .then(res => {
          this.isShow = true;
          this.captcha_hash = res.data.captcha_hash;
          this.captcha_image = res.data.captcha_image;
        });
    },
  
    // 点击登录按钮进行登录的函数
    loginByMobile() {
      let self = this;
      let dat = {
        mobile: this.phonenum,
        scf: "ms",
        validate_code: this.validate_code,
        validate_token: this.validate_token
      };
      this.$axios
        .post("/api/restapi/eus/login/login_by_mobile", dat)
        .then(res => {
          console.log('最终登录的时候获取到的数据', res)
          
          self.setUserId(res.data.user_id);
          this.$router.push({name: 'mine' });
          // this.need_bind_mobile = res.data.need_bind_mobile;
        });
    }
  }
};
</script>

<style scoped>
.login {
  margin: 14vw;
}
.login-shang img {
  display: block;
  height: 56px;
  margin: 0 auto;
}
.login-xia {
  margin-top: 12px;
}
section {
  margin-top: 8vw;
  height: 12vw;
}
::-webkit-input-placeholder {
  /* WebKit browsers */
  color: red;
  font-size: 16px;
}

::-moz-placeholder {
  /* Mozilla Firefox 19+ */
  color: red;
  font-size: 16px;
}

:-ms-input-placeholder {
  /* Internet Explorer 10+ */
  color: red;
  font-size: 16px;
}
input {
  width: 100%;
  height: 100%;
  border-radius: 5px;
  border: none;
  padding-left: 4vw;
}
input:focus {
  outline: none;
  border: 1px solid #2395ff;
}
.xia1 {
  position: relative;
}
.yzm {
  background: none;
  border: none;
  position: absolute;
  top: 4vw;
  right: 0;
  color: #ccc;
}
.xieyi {
  margin-top: 5vw;
  font-size: 14px;
  color: #999;
}
.xieyi a {
  text-decoration: none;
  color: #2395ff;
}
.logins {
  background: #4cd96f;
  margin-top: 30px;
  display: block;
  width: 100%;
  height: 42px;
  line-height: 42px;
  border: none;
  border-radius: 4px;
  color: #fff;
}
.about {
  display: block;
  color: #999;
  font-size: 14px;
  margin-top: 20px;
  text-align: center;
  text-decoration: none;
}
.popup {
  width: 80vw;
  background: hsla(0, 0%, 100%, 0.9);
  border-radius: 1.3vw;
  border-radius: 1.2vw;
}
.popup p {
  font-size: 1.2rem;
  font-weight: 700;
  color: #000;
  text-align: center;
  margin: 22px 0;
}
.popup_1 {
}
.popup_1 div {
  height: 43px;
  width: 72vw;
  margin: 0 auto;
  display: flex;
  /* background-color:rebeccapurple; */
}
.popup_inp {
  display: inline-block;
  background-color: rebeccapurple;
  /* width: ; */
}
.popup_1 img {
  /* float: right; */
}
.popup_2 {
  margin-top: 22px;
  width: 100%;
}
.popup_2 button {
  width: 39.2vw;
  height: 12vw;
  border: none;
  margin: 0 auto;
}
.popup_2 button:nth-child(2) {
  color: #4cd96f;
}
</style>
